var FloatingMenu = Base.extend({

    SCROLL_DURATION: 500,
    MENU_MARGIN_BOTTOM: 5,
    FLOATING_MENU_CLASS: 'floating',
    DISPLAY_MENU_CLASS: 'display',

    _menu: null,
    _menuWrapperOffsetTop: null,

    constructor: function()
    {
        this._menu = $( '#menu' );
        this._menuWrapperOffsetTop = $( '.menu_wrapper' ).offset().top;
        $('.nav_menu_item').bind('click', handler( this, '_onItemClick') );
        $(window).bind( 'scroll', handler( this, '_onScroll' ));
        this._onScroll();
    },

    _onScroll: function()
    {
        var scrollTop = $(window).scrollTop();
        
        if ( scrollTop > this._menuWrapperOffsetTop )
        {
            this._menu.addClass( this.FLOATING_MENU_CLASS );
            this._menu.addClass( this.DISPLAY_MENU_CLASS );
        }
        else
        {
            this._menu.removeClass( this.FLOATING_MENU_CLASS );
            this._menu.removeClass( this.DISPLAY_MENU_CLASS );
        }
    },

    _onItemClick: function( event )
    {
        var menuItem = $(event.currentTarget);
        var menuItemHref = menuItem.attr( 'href' );
        var menuItemTarget = $(menuItemHref);
        var offsetTop = this._menu.height() + this.MENU_MARGIN_BOTTOM;
        $.scrollTo( menuItemTarget, this.SCROLL_DURATION, {offset: -offsetTop} );
        return false;
    }
});




